<template>
  <div>
    <!--头部导航条-->
    <div class="nav">
      <div style="margin-left: 20px">
        <ul class="navul">
          <li @click="home"><van-icon name="wap-home" color="#FF4400" />闲呗首页</li>
          <li>
            Hi,<a>{{ profile[0].userName }}</a>
          </li>
          <li @click="exit">退出</li>
        </ul>
      </div>
      <div style="float: right">
        <ul class="navultow">
          <li class="mycb1">
            <a class="myxb">我的闲呗</a>
            <div class="hen"></div>
            <ul class="second">
              <li><a class="second1">我已买到的宝贝</a></li>
              <li class="second1">我已卖出的宝贝</li>
            </ul>
          </li>
          <li @click="publish">
            <van-icon name="shopping-cart-o" color="#FF4400" />发布商品
            <div class="hen"></div>
          </li>
          <li>
            <van-icon name="star" color="#FF4400" />收藏夹
            <div class="hen"></div>
          </li>
          <li>
            手机版
            <div class="hen"></div>
          </li>
          <li>
            联系客服
            <div class="hen"></div>
          </li>
          <li>发布闲置</li>
        </ul>
      </div>
    </div>
    <!--Logo-->
    <div class="box2">
      <div class="log"></div>
    </div>
    <!--意见反馈-->
    <div class="complaint">意见反馈</div>
    <div class="headlinebox">
      <div class="headline">
        Hi,请输入您给<span style="font-weight: 700; font-size: 16px">商家</span
        >存在的问题反馈或建议吧～
      </div>
      <div class="srk">
        <textarea
          v-model="describe"
          id=""
          cols="30"
          rows="10"
          placeholder="请描述商家问题，某个商品无法使用/不好用、欺诈消费者、货不对板、或其他建议(5个字以上)"
        ></textarea>
      </div>
    </div>
    <!--上传图片-->
    <div class="ms">
      <div style="font-size: 18px">上传“有效图片”可以让问题优先被发现哦</div>
    </div>
    <div class="tsimg">
      <van-uploader :after-read="afterRead" v-model="fileList" />
    </div>
    <div class="phone">
      <div>
        <span style="font-size: 18px">联系电话</span>
        <span class="jjwt">解决过程中,方便我们与您联系</span>
      </div>
      <div class="phonesr">
        <input type="text" v-model="number" placeholder="请输入您的手机号码" />
      </div>
    </div>
    <!--提交按钮-->
    <div class="tj">
      <div @click="submit1">提交</div>
    </div>
  </div>
</template>


<script>
import { Toast } from "vant";
export default {
  data() {
    return {
      fileList: [
        // Uploader 根据文件后缀来判断是否为图片文件
        // 如果图片 URL 中不包含类型信息，可以添加 isImage 标记来声明
      ],
      imgList: [],
      describe: "",
      number: "",
      user: window.sessionStorage.getItem("userTel"),
      sellerid: localStorage.getItem("BeComplainedPeople"),
      commodityId: localStorage.getItem("BeComplainedGoods"),
      state: 0,
      profile: [{ userName: "" }],
    };
  },
  methods: {
    home(){//跳转首页
      this.$router.push('/')
    },
    publish(){
            if (sessionStorage.getItem('userTel')) {
                this.$router.push('ReleaseView')
            }else{
                this.$router.push({
                    name:'Login'
                })
            }
         },
    exit() {
      //退出登录
      sessionStorage.removeItem("userTel");
      this.$router.push("/");
    },
    afterRead(file) {
      // 此时可以自行将文件上传至服务器
      console.log(file);

      let formData = new FormData();
      formData.append("file", file.file);
      console.log(file.file);
      this.$axios({
        url: "http://112.74.185.144:8000/api/common/uploadfile",
        method: "POST",
        data: formData,
        // headers: {' Content-Type' :'multipart/form-data'}
      })
        .then((resp) => {
          console.log(resp.data);
          // this.loginer.photo = resp.data.data
          this.imgList.push(resp.data.data);
        })
        .catch((err) => {
          console.log(err);
        });
    },
    submit1() {
      if (this.describe != "" && this.number != "" && this.fileList != "") {
        this.$axios
          .post(
            "api/complaintTable/get",
            this.$qs.stringify({
              commodityId: this.commodityId,
              sellerTel: this.sellerid,
              complaintDetails: this.describe,
              complaintImg: this.imgList[0],
              state: this.state,
            })
          )
          .then((resp) => {
            this.describe='';
            this.fileList= [];
            this.imgList =[];
            this.number='';
            console.log(resp);
            Toast("发表成功");
          })
          .catch((err) => {
            console.log(err);
            Toast("投诉失败,请你与管理员联系");
          });
      } else {
        Toast("[反馈]&[图片]&[电话]都不能为空哦");
      }
    },
  },
  mounted() {
    this.$axios({
      url: "api/myprofile/get", //rul
      methods: "get", //type
      params: {
        acc: this.user,
      },
    })
      .then((data) => {
        this.profile = data.data.data;
        console.log(this.profile, 882);
      })
      .catch((err) => {
        console.log(err);
      });
  },
};
</script>



<style scoped>
* {
  padding: 0;
  margin: 0;
  text-decoration: none;
  list-style: none;
  font-size: 12px;
}

.nav {
  width: 100%;
  height: 35px;
  /* border: 1px solid red; */
  background-color: #f5f5f5;
  box-shadow: 0px 0px 2px #2999;
  color: #756c6c;
  font-size: 10px;
  cursor: pointer;
}

.navul li:hover {
  color: #ff4400;
}

.navul li {
  float: left;
  width: 100px;
  height: 30px;
  line-height: 35px;
  /* text-align: center; */
}

.navultow li {
  position: relative;
  float: left;
  width: 100px;
  height: 30px;
  line-height: 35px;
}

.hen {
  width: 1px;
  height: 10px;
  background-color: rgb(0, 0, 0, 0.2);
  position: absolute;
  top: 11px;
  right: 24px;
  transform: rotate(20deg);
}

.second {
  width: 100px;
  height: 70px;
  box-shadow: 0px 0px 2px #2999;
  display: none;
}

.mycb1:hover .second {
  /* color:#FF4400; */
  display: block;
}

.myxb:hover {
  text-decoration: underline;
  color: #ff4400;
}

.second1:hover {
  color: #ff4400;
  text-decoration: underline;
}

.box2 {
  margin: 0 auto;
  /* position:absolute; */
  width: 1000px;
  height: 119px;
  /* border: 1px solid red; */
}

.log {
  background-image: url(http://112.74.185.144:8000/files/Zqm1666747516.jpg);
  background-size: 100%;
  width: 130px;
  height: 130px;
  border-radius: 10px;
  background-repeat: no-repeat;
  /* border: 1px solid red; */
  /* background-position:20px; */
}

.complaint {
  width: 1000px;
  height: 30px;
  /* border: 1px solid rebeccapurple; */
  margin: 0 auto;
  font-size: 20px;
  text-align: center;
}

.headlinebox {
  width: 1000px;
  height: 230px;
  /* border: 1px solid royalblue; */
  margin: 0 auto;
}

.headline {
  font-size: 16px;
}

.srk {
  margin-top: 10px;
}

.srk textarea {
  width: 980px;
  height: 150px;
  resize: none;
  padding: 10px;
}

.srk textarea::-webkit-input-placeholder {
  font-size: 14px;
  /* padding: 10px 10px; */
}

.ms {
  width: 1000px;
  height: 40px;
  margin: 0 auto;
  font-size: 18px;
}

.tsimg {
  width: 1000px;
  height: 119px;
  margin: 0 auto;
}

.phone {
  width: 1000px;
  height: 100px;
  margin: 0 auto;
  /* font-size: 18px; */
}

.jjwt {
  color: darkgray;
  margin-left: 5px;
  font-size: 14px;
}

.phonesr {
  margin-top: 7px;
  height: 100px;
}

.phonesr input {
  width: 300px;
  height: 40px;
  border: 0.5px solid darkgray;
  border-radius: 10px;
}

.tj {
  width: 1000px;
  height: 40px;
  margin: 0 auto;
}

.tj div {
  width: 110px;
  height: 31px;
  background-color: tomato;
  color: white;
  text-align: center;
  line-height: 31px;
  border-radius: 10px;
}
</style>